<template>
  <div class="checkProject">
    <van-nav-bar
      class="header"
      :fixed="true"
      left-arrow
      color="#333"
      :border="false"
      @click-left="close"
      title="选择项目"
    >
    </van-nav-bar>
    <div class="contentWapper">
      <div class="searchInput">
        <van-search v-model="state.value" placeholder="请输入项目" />
      </div>
      <van-index-bar
        class="content"
        highlight-color="#208CFF"
        :index-list="state.projectList.firstLetters || []"
      >
        <div v-for="item in state.projectList.firstLetters" :key="item">
          <van-index-anchor :index="item" />
          <van-cell
            v-show="searchValue(child.project_name) != '-1'"
            :title="child.project_name"
            v-for="child in state.projectList.projects[item]"
            :key="child.countryCode"
            @click="checkProject(child)"
          />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, getCurrentInstance } from "vue";

const emit = defineEmits(["getProjectData", "update:isOpenProject"]);
const { proxy } = getCurrentInstance();
const props = defineProps({
  memberIds: {
    type: String
  }
});
const state = reactive({
  value: "",
  projectList: {}
});

onMounted(() => {
  getProjectList();
});

// 查询项目
const getProjectList = async () => {
  const url = "/security/v1/common/searchProjectList";
  const memberIds = [props.memberIds];
  memberIds.push(localStorage.getItem("memberId"));
  const data = {
    member_ids: memberIds
  };
  const ret = await proxy.$axiosJson(url, data, "post", false);
  if (ret.ret_code === "10000") {
    let projects = {};
    try {
      ret.data.projects.forEach(e => {
        Object.assign(projects, e);
      });
      state.projectList = {
        firstLetters: ret.data.first_letters,
        projects
      };
    } catch (e){}
  }
};

const searchValue = params => {
  if (state.value) {
    return params.indexOf(state.value);
  } else {
    return true;
  }
};

const checkProject = params => {
  emit("getProjectData", params);
};

const close = () => {
  emit("update:isOpenProject", false);
};
</script>

<style scoped lang="less">
.checkProject {
  z-index: 102;
  background: #f2f3f5;
  min-height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  .header {
    .right {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      color: rgba(32, 140, 255, 1);
      line-height: 14px;
      img {
        width: 14px;
        height: 14px;
        margin-right: 6px;
      }
    }
  }
  .contentWapper {
    padding-top: 46px;
    .searchInput {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 8px -4px rgba(0, 0, 0, 0.2);
      :deep(.van-search__content) {
        border-radius: 20px;
      }
    }
    .topName {
      padding: 0 15px;
      background: white;
      border-top: 1px solid #f2f2f2;
      line-height: 44px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
}
</style>
